<script setup lang="ts">
import { ref,provide } from 'vue';
const props =defineProps<{
	// icon:{
	// 	type: object,
	// 	default: ''
	// },
	// title:{
	// 	type: string,
	// 	default: '未命名'
	// },
	
	// source?:{
	// 	type: string,
	// 	default: ''
	// },
	// content?:{
	// 	type: object,
	// 	default: ''
	// },
}>()

const show=ref(false);


const width=ref(80);
const height=ref(80);
const x=ref(10);
const y=ref(10);
const source = ref(null);
const content=ref(null);
const icon=ref(null);
const title=ref('未命名');

function closeWinow(){
	show.value=false;
}
const showWindow=(par:any)=>{
	show.value=true;
	source.value=par.source;
	content.value=par.content;
	icon.value=par.icon;
	par.title&&(title.value=par.title);
}
function minimize(){
	if(width.value==100){
		width.value=80;
		height.value=80;
		x.value=10;
		y.value=10;
	}
	else{
		width.value=100;
		height.value=100;
		x.value=0;
		y.value=0;
	}
}

defineExpose({
	showWindow
   });
// const emit = defineEmits<{
// 	(e: 'click', source: string): void
// }>();

// function dblclick(){
// 	emit('click', props.source);
// }
</script>

<template>  		
	<div v-if="show" class="window" :style="`width:${width}%;height:${height}%;left:${x}%;top:${y}%;z-index:999`">
		<div class="header">
			<div class="icon">
				<icon></icon>
			</div>
			<div class="text">{{title}}</div>
			<div class="buttons">
				<div class="button">-</div>
				<div class="button" @click="minimize">□</div>
				<div class="button" @click="closeWinow">×</div>
			</div>
		</div>
		<div class="content">
			<iframe v-if="source" :src="source" frameborder="0" width="100%" height="100%"></iframe>
			<component v-if="content" :is="content"></component>
		</div>
	</div>
</template>

<style scoped>

		.window{
			/* width: 100%;
			height: 100%; */
			display: flex;
			background-color: #ccc;
			display: flex;
			flex-direction: column;
			position: absolute;
			font-size: 1.1em;
			border: 0.1em solid #666;
			border-radius: 1em;
			overflow: hidden;
		}
		.window .header{
			width: 100%;
			height: 3em;
			/* background-color: #333; */
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10px;
			background-color: #333;
		}
		.window .header .icon{
			/* width: 20px;
			height: 20px;
			background-color: #fff;	 */
			font-size: 0.3em;
			display: flex;
		}
		.window .header .text{
			color: #fff;
			font-size: 1em;
		}
		.window .content{
			/* width: 100%; */
			height: calc(100% - 2em);
			/* background-color: #929090; */
		}
		
		.window .header .buttons{
			display: flex;
		}
		.window .header .buttons .button{
			width: 1.5rem;
			/* line-height: 3rem; */
			margin-right: 1em;
			display: flex;
			justify-content: center;
			font-size: 2em;
			color: #fff;
			cursor: pointer;
			font-weight: bolder;
		}
		.window .header .buttons .button:hover{
			background-color: #ccc
		}
</style>